<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <style>
    .errorText{
      color: red;
    }
  </style>
<style>

</style>
  <body>
      <div id="root"></div>
      <script type="text/babel">
        class Hello extends React.Component {
          state={
            name:'',
            sex:'',
            text:'',
            psd:'',
            phone:'',
          }
            handelSubmit=(e)=>{
              let {name,sex,text,psd,phone} = this.state
              let data =  {name,sex,text,psd,phone} 
            e.preventDefault()
              alert(JSON.stringify(data))
            }
            handelChange(e,info1,info2){
              let value = e.target.value
              let name  = e.target.name
              let rule = new RegExp(e.target.getAttribute('rule'))
              console.log(rule)
              let error = ''
              if(value == ''){
                error = info1
              }else if(rule.test(value) == false){
                error = info2
              }else{
                error = ''
              }
              console.log(error,'error')
              this.setState({
                [name]:e.target.value,
                [name + 'Error']:error
              })
            }
          render(){
            let {name,sex,text,psd,phone,nameError,psdError,phoneError} = this.state
            let arr = [
              {id:1,city:'北京'},
              {id:2,color:'上海'},
              {id:3,color:'深圳'},
              {id:4,color:'广州'},
              {id:5,color:'天津'},
              {id:6,color:'长沙'},
            ]
            return <div> 
              <form>
                姓名：<input type="text" defaultValue={name} name='name' rule='^[\u4e00-\u9fa5]{2,4}$' onChange={(e)=>this.handelChange(e,'请输入姓名','请填写2-4位的中文文字')}/>
                <span className='errorText'>{nameError}</span><br/>
                密码：<input type="password" defaultValue={psd} name='psd' rule='^.{6,16}$' onChange={(e)=>this.handelChange(e,'请输入密码','请输入6-16位的密码')}/>
                <span className='errorText'>{psdError}</span><br/>
                性别：<label><input type="radio" value='1' name='sex' data='sex' defaultChecked={this.state.sex == '1'} onChange={(e)=>this.handelChange(e)}/>男</label>
                <label><input type="radio" value='2' name='sex' data='sex'  defaultChecked={this.state.sex == '2'} onChange={(e)=>this.handelChange(e)}/>女</label><br/>
                手机号：<input type="text" defaultValue={phone} name='phone' 
                rule='^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$'
                onChange={(e)=>this.handelChange(e,'请输入手机号','手机号格式错误')}/>
                <span className='errorText'>{phoneError}</span><br/>
                备注：<textarea defaultValue={text} cols="30" rows="3" name='text' onChange={(e)=>this.handelChange(e)}></textarea><br/>
                <button onClick={this.handelSubmit}>提交</button>
                </form>
                </div>
          }
        }
        ReactDOM.render(<Hello />, document.getElementById("root"))
      </script>
  </body>
</html>
